<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:10px;">
      <el-breadcrumb-item :to="{ path: '/job' }">求职页面</el-breadcrumb-item>
      <el-breadcrumb-item>岗位详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="display:flex;">
      <div class="leftArea">
        <el-card style="margin-bottom: 15px;">
          <div class="header">
            <div>
              <span class="post">{{detail.post}}</span>
              <span>{{detail.fromMoney+'~'+detail.toMoney+'K'}} * {{12+detail.months}}薪</span>
              <div class="education">
                <span class="item">{{detail.workPlace}}</span>
                <span class="item">{{educationMap[detail.education]}}</span>
              </div>
            </div>
            <el-button type="primary" @click="submitResume" v-if="!isSubmit">立即投递</el-button>
            <el-button type="primary" @click="submitResume" v-else disabled>该岗位已投递</el-button>
          </div>
          <div class="footer">
            <img :src="detail.userAvatarUrl" alt="">
            <div><span>{{detail.userName}}</span><i class="iconfont icon-huifu"></i></div>
          </div>
        </el-card>
        <el-card>
          <div>
            <div style="margin: 10px 0;">岗位职责</div>
            <div style="white-space: pre-line;">{{detail.duty}}</div>
          </div>
          <div>
            <div style="margin: 10px 0;">岗位要求</div>
            <div style="white-space: pre-line;">{{detail.request}}</div>
          </div>
        </el-card>
      </div>
      <el-card style="margin-left: 15px;min-width: 250px;">
        <div class="companyInfo">
          <img :src="detail.avatarUrl" alt="">
          <span>{{detail.companyName}}</span>
          <div>
            <span class="companyInfoItem">{{detail.industry}}</span>
            <span class="companyInfoItem">{{detail.workPlace}}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isSubmit: false,
      detail: {},
      educationMap: {
        1: '博士后',
        2: '博士',
        3: '硕士',
        4: '本科',
        5: '专科',
        6: '高中',
        7: '初中',
        8: '小学'
      }
    }
  },
  methods: {
    async queryRelation () {
      const {jobId} = this.$route.params
      const {data: res} = await this.$http.get(`/job/relation/${jobId}`)
      if (res.length > 0) {
        this.isSubmit = true
      }
    },
    submitResume () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const {jobId} = this.$route.params
      this.$http.post('/job/submitResume', {userId, jobId: +jobId})
    },
    async getDetail () {
      const {jobId} = this.$route.params
      const {data: res} = await this.$http.get(`/job/detail/${jobId}`)
      this.detail = res
      console.log(res)
    }
  },
  created () {
    this.getDetail()
    this.queryRelation()
    this.createPdf()
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 10px 100px;
  .leftArea {
    flex: 1;
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }
  .footer {
    display: flex;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
  .companyInfo {
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
